<template>
  <div class="home-header-container">
    <SelectCityBtn></SelectCityBtn>
    <div class="search-btn" @click="topPath('/pages/movie-search/index')">
      <Search color="#858a99" size="0.6rem"></Search>
      <div class="name">搜索影片</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import SelectCityBtn from "../../components/select-city-btn/index.vue";
import { Search } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
const topPath = (url: string) => {
  Taro.navigateTo({ url });
};
</script>
<style lang="scss">
.home-header-container {
  display: flex;
  flex-direction: row;
  color: #15181d;
  align-items: center;
  padding: 0.5rem 0.5rem;

  .search-btn {
    flex: 1;
    background: #fff;
    border-radius: 10rem;
    display: flex;
    flex-direction: row;
    font-size: 0.6rem;
    color: #858a99;
    align-items: center;
    padding: 0 0.6rem;
    height: 2rem;
    .name {
      margin-left: 0.6rem;
    }
  }
}
</style>
